/**
 * 项目概况
 */

import { NavLink, Route, Link, Redirect } from 'react-router-dom'
import React, { Component } from 'react';
import './project.css';
import ProjectBuildings from './projectBuildings';


// 所有项目介绍的json
import projectData from '../../projectData/project-intro.json';

// 定义项目中的楼栋子路由
// 导航和路由切换的配置
// ps: 楼栋介绍统一在ProjectItem,无例外.
const cch = {
  path: '/project/cch',
  name: "长城汇"
}

const ggtd1 = {
  path: '/project/ggtd1',
  name: "光谷天地一期"
}

const ggtd2 = {
  path: '/project/ggtd2',
  name: "光谷天地二期"
}
const jwjr = {
  path: '/project/jwjr',
  name: "健吾假日广场"
}
const jxlc = {
  path: '/project/jxlc',
  name: "锦绣龙城"
}

const dsc = {
  path: '/project/dsc',
  name: "达尚城"
}

const dwgtxc = {
  path: '/project/dwgtxc',
  name: "大悟高铁新城"
}

const DataMap = {
  'cch': cch,
  'ggtd1': ggtd1,
  'ggtd2': ggtd2,
  'jwjr': jwjr,
  'jxlc': jxlc,
  'dsc': dsc,
  'dwgtxc': dwgtxc // admin
}


// 项目页面的导航
const Navigator = (props) => (
  <div className="head">
    <Link to="/"><div className="logo"></div></Link>
    <div className="list" id="HeadWrapper">
      <div className="pj-headscroller">
        <ul>
          {props.routes.map((item, i) => (
            <li key={i}>
              <NavLink to={item.path}  >{item.name}</NavLink>
            </li >
          ))}
        </ul>
      </div>
    </div>
  </div >
)

const FadingRoute = ({ component: Component, ...rest }) => (
  <Route  {...rest} render={props => (
    <ProjectBuildings {...props} {...rest} data={projectData[rest.name]} />
  )} />
)

class Project extends Component {

  constructor(props) {
    super(props);
    this.state = { routes: [], redirect: null };
  }

  componentWillMount() {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'));

    var routes = [];
    for (let i in userInfo) {
      if (userInfo[i] > 0 && DataMap[i]) {
        routes.push(DataMap[i]);
      }
    }

    if (routes.length > 0) {
      this.setState({ routes: routes });
    } else {
      this.setState({ redirect: <Redirect to="/" /> })
    }
  }

  render() {
    const routes = this.state.routes;
    const redirect = this.state.redirect;
    return (
      <div>
        {redirect}
        <Navigator routes={routes} />
        {/* data为当前项目的完整数据介绍（不包括房型具体数据） */}
        {routes.map((route, i) => (
          <FadingRoute key={i} {...route} {...this.props} />
        ))}
      </div>
    )

  }
}

export default Project;
